<html>  
    <head>  
       <title>DeviceOrientationEvent</title>  
       <meta charset="UTF-8" />  
    </head>  
    <body>  
        <p>左右：<span id="alpha">0</span></p>  
        <p>前后：<span id="beta">0</span></p>  
        <p>扭转：<span id="gamma">0</span></p>  
        <p>指北针指向：<span id="heading">0</span>度</p>  
        <p>指北针精度：<span id="accuracy">0</span>度</p>  
        <script type="text/javascript">  
        function orientationHandler(event) {  
            document.getElementById("alpha").innerHTML = event.alpha;  
            document.getElementById("beta").innerHTML = event.beta;  
            document.getElementById("gamma").innerHTML = event.gamma;  
            document.getElementById("heading").innerHTML = event.webkitCompassHeading;  
            document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;  
        }  
          
        if (window.DeviceOrientationEvent) {  
          window.addEventListener("deviceorientation", orientationHandler, false);  
        } else {  
          document.body.innerHTML = "What user agent u r using???";  
        }  
        </script>  
    </body>  
</html> 